<template>
  <div class="content" ref="content">
    <div class="login-box">
      <div class="owl" id="owl">
        <div class="hand"></div>
        <div class="hand hand-r"></div>
        <div class="arms">
          <div class="arm"></div>
          <div class="arm arm-r"></div>
        </div>
      </div>
      <div class="input-box">
        <input type="text" placeholder="手机号" v-model="mobile1" />
        <input
          type="password"
          placeholder="密码"
          id="password"
          v-model="password"
        />
        <div class="btn_box">
          <button class="submit_btn" @click="login">普通</button>
          <button class="submit_btn" @click="adminLogin">管理</button>
        </div>
        <div class="register">
          <span class="register_st"
            ><a href="/register">没有账号？去注册</a></span
          >
          <span class="register_ad" @click="showDialog = !showDialog"
            >管理员注册</span
          >
        </div>
      </div>
      <!-- 管理员注册插槽复用组件 -->
      <Dialog @close="close" v-if="showDialog">
        <template #header>
          <h1 class="text-[0.7rem]">管理员注册</h1>
        </template>
        <van-form @submit="onSubmit">
          <van-cell-group inset>
            <van-field
              v-model="adminMobile"
              name="adminMobile"
              label="手机号"
              placeholder="手机号"
              :rules="[{ required: true, message: '请填写手机号' }]"
            />
            <van-field
              v-model="invitationCode"
              name="invitationCode"
              label="邀请码"
              placeholder="邀请码"
              :rules="[{ required: true, message: '请填写邀请码' }]"
            />
          </van-cell-group>

          <div style="margin: 16px">
            <van-button round block type="primary" native-type="submit">
              提交
            </van-button>
          </div>
        </van-form>

        <template #footer> 授权用户信息 </template>
      </Dialog>

      <div ref="to_phone_login" class="to_phone_login">
        <img src="@/assets/img/phone.svg" alt="" />
      </div>
    </div>
  </div>
  <div class="content_num" ref="content_num">
    <div class="login-box">
      <div class="owl" id="owl">
        <div class="hand"></div>
        <div class="hand hand-r"></div>
        <div class="arms">
          <div class="arm"></div>
          <div class="arm arm-r"></div>
        </div>
      </div>
      <div class="input-box">
        <input type="text" placeholder="手机号" v-model="mobile2" />
        <div class="auth_code">
          <input type="text" placeholder="验证码" v-model="code" />
          <button @click="startCountdown" :disabled="isCountdownActive">
            {{ isCountdownActive ? `${countdownSeconds}s` : "获取验证码" }}
          </button>
        </div>
        <div class="btn_box">
          <button class="submit_btn" @click="loginByMobile">员工</button>
          <button class="submit_btn" @click="adminLoginByMobile">管理员</button>
        </div>
        <div class="register">
          <span class="register_st">没有账号？去注册</span>
        </div>
        <div ref="to_password_login" class="to_password_login">
          <img src="@/assets/img/lock.svg" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import UserService from "@/api/userService.ts";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { useUserStore } from "@/stores/userStore.ts";
import Dialog from "@/components/Dialog.vue";
import { useStorage } from "@/hooks/useStorage.ts";
import { usePermissStore } from "@/stores/permissStore.ts";

const permissStore = usePermissStore();
const userStore = useUserStore();
const router = useRouter();

$(function () {
  $("#password")
    .focus(function () {
      // 密码框获得焦点，追加样式.password
      $("#owl").addClass("password");
    })
    .blur(function () {
      // 密码框失去焦点，移除样式.password
      $("#owl").removeClass("password");
    });
});

let mobile1 = ref("");
let mobile2 = ref("");
let password = ref("");
let code = ref("");
let loginType = ref("password");

// 普通登录
const login = async () => {
  if (mobile1.value === "" || password.value === "") {
    ElMessage("账号或密码不能为空");
    return;
  }
  let data = {
    mobile: mobile1.value,
    password: password.value,
  };
  try {
    let res = await UserService.login(data);
    if (res.code === 200) {
      ElMessage({
        message: "登录成功",
        type: "success",
      });
      useStorage("userInfo", res.data);
      userStore.setToken(res.data.token)
      const keys =
        permissStore.defaultList[res.data.type == 1 ? "admin" : "user"];
      permissStore.handleSet(keys);
      router.push("/home");
    } else {
      console.log(res);
      ElMessage({
        message: res.message,
        type: "error",
      });
    }
  } catch (error) {}
};
// 普通手机登录
const loginByMobile = async () => {
  if (mobile2.value === "") {
    ElMessage("手机号不能为空");
    return;
  }
  let data = {
    mobile: mobile2.value,
    code: code.value,
  };
  try {
    let res = await UserService.loginByMobile(data);
    if (res.code === 200) {
      ElMessage({
        message: "登录成功",
        type: "success",
      });
      router.push("/home");
    } else {
      console.log(res);
      ElMessage({
        message: res.message,
        type: "error",
      });
    }
  } catch (error) {}
};
// 管理员登录
const adminLogin = async () => {
  if (mobile1.value === "" || password.value === "") {
    ElMessage("账号或密码不能为空");
    return;
  }
  let data = {
    mobile: mobile1.value,
    password: password.value,
  };
  try {
    let res = await UserService.loginAdmin(data);
    if (res.code === 200) {
      ElMessage({
        message: "登录成功",
        type: "success",
      });
      router.push("/adminHome");
    } else {
      console.log(res);
      ElMessage({
        message: res.message,
        type: "error",
      });
    }
  } catch (error) {}
};
// 管理员手机登录
const adminLoginByMobile = async () => {
  if (mobile2.value === "") {
    ElMessage("手机号不能为空");
    return;
  }
  let data = {
    mobile: mobile2.value,
    code: code.value,
  };
  try {
    let res = await UserService.adminLoginByMobile(data);
    if (res.code === 200) {
      ElMessage({
        message: "登录成功",
        type: "success",
      });
      router.push("/adminHome");
    } else {
      console.log(res);
      ElMessage({
        message: res.message,
        type: "error",
      });
    }
  } catch (error) {}
};

// 获取验证码 倒计时
const isCountdownActive = ref(false);
const countdownSeconds = ref(60);

async function startCountdown() {
  if (mobile2.value === "") {
    ElMessage("手机号不能为空");
    return;
  }
  isCountdownActive.value = true;
  const countdownInterval = setInterval(() => {
    if (countdownSeconds.value > 0) {
      countdownSeconds.value--;
    } else {
      isCountdownActive.value = false;
      clearInterval(countdownInterval);
    }
  }, 1000);
  // 发送验证码
  let data = { mobile: mobile2.value };
  let res = await UserService.getCode(data);
  if (res.code === 200) {
    ElMessage({
      message: "发送成功",
      type: "success",
    });
  } else {
    ElMessage({
      message: res.message,
      type: "error",
    });
    isCountdownActive.value = false;
    clearInterval(countdownInterval);
  }
}
// 手机号登录或者密码登录切换
const content = ref(null);
const content_num = ref(null);
const to_phone_login = ref(null);
const to_password_login = ref(null);

onMounted(() => {
  localStorage.removeItem("userInfo");
  to_phone_login.value.addEventListener("click", handlePhoneNumberClick);
  to_password_login.value.addEventListener("click", handlePassWordClick);
});

function handlePhoneNumberClick() {
  loginType.value = "phone";
  ``;
  content_num.value.style.left = 0;
  content.value.style.opacity = 0.4;
  setTimeout(() => {
    to_password_login.value.style.bottom = "10%";
  }, 700);
  to_phone_login.value.style.bottom = "-10%";
}
function handlePassWordClick() {
  loginType.value = "password";
  content_num.value.style.left = "-100vw";
  to_password_login.value.style.bottom = "-10%";
  content.value.style.opacity = 1;
  setTimeout(() => {
    to_phone_login.value.style.bottom = "10%";
  }, 700);
}

const showDialog = ref(false);

const close = () => {
  showDialog.value = false;
};
</script>

<style lang="less" scoped>
.content {
  /* 100%窗口高度 */
  height: 100vh;
  width: 100vw;
  /* 弹性布局 居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 渐变背景 */
  background: linear-gradient(200deg, #72afd3, #96fbc4);
  top: 0;
  // 动画2s
  transition: 2.5s;
  .login-box {
    /* 相对定位 */
    position: relative;
    width: 320px;

    .to_phone_login {
      position: fixed;
      bottom: 10%;
      left: 50%;
      transform: translateX(-50%);
      border: rgb(118, 184, 210) 2px solid;
      padding: 10px;
      border-radius: 35%;
      transition: 0.6s;
      img {
        width: 40px;
      }
    }
  }
  .input-box {
    /* 弹性布局 垂直排列 */
    display: flex;
    flex-direction: column;

    input {
      height: 40px;
      border-radius: 20px;
      /* 缩进15像素 */
      text-indent: 15px;
      outline: none;
      border: none;
      margin-bottom: 15px;
    }
    .register {
      margin-top: 15px;
      display: flex;
      justify-content: space-between;
    }
  }

  .input-box input:focus {
    outline: 1px solid lightseagreen;
  }

  .input-box .btn_box {
    display: flex;
    justify-content: space-between;

    button {
      width: 150px;
      border: none;
      border-radius: 20px;
      height: 45px;
      background-color: lightseagreen;
      color: #fff;
      cursor: pointer;
    }
  }

  /* 接下来是猫头鹰的样式 */
  .owl {
    width: 211px;
    height: 108px;
    /* 背景图片 */
    background: url("@/assets/img/owl-login.png") no-repeat;
    /* 绝对定位 */
    position: absolute;
    top: -100px;
    /* 水平居中 */
    left: 50%;
    transform: translateX(-50%);
  }
  .owl .hand {
    width: 34px;
    height: 34px;
    border-radius: 40px;
    background-color: #472d20;
    /* 绝对定位 */
    position: absolute;
    left: 12px;
    bottom: -8px;
    /* 沿Y轴缩放0.6倍（压扁） */
    transform: scaleY(0.6);
    /* 动画过渡 */
    transition: 0.3s ease-out;
  }
  .owl .hand.hand-r {
    left: 170px;
  }
  .owl.password .hand {
    transform: translateX(42px) translateY(-15px) scale(0.7);
  }
  .owl.password .hand.hand-r {
    transform: translateX(-42px) translateY(-15px) scale(0.7);
  }
  .owl .arms {
    position: absolute;
    top: 58px;
    width: 100%;
    height: 41px;
    overflow: hidden;
  }
  .owl .arms .arm {
    width: 40px;
    height: 65px;
    position: absolute;
    left: 20px;
    top: 40px;
    background: url("@/assets/img/owl-login-arm.png") no-repeat;
    transform: rotate(-20deg);
    transition: 0.3s ease-out;
  }
  .owl .arms .arm.arm-r {
    transform: rotate(20deg) scaleX(-1);
    left: 158px;
  }
  .owl.password .arms .arm {
    transform: translateY(-40px) translateX(40px);
  }
  .owl.password .arms .arm.arm-r {
    transform: translateY(-40px) translateX(-40px) scaleX(-1);
  }
}
.content_num {
  /* 100%窗口高度 */
  height: 100vh;
  width: 100vw;
  /* 弹性布局 居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 渐变背景 */
  background: linear-gradient(200deg, #72afd3, #96fbc4);
  position: absolute;
  top: 0;
  left: -100%;
  // 动画1s
  transition: 1s;
  .login-box {
    /* 相对定位 */
    position: relative;
    width: 320px;

    .to_password_login {
      position: fixed;
      bottom: -10%;
      left: 50%;
      transform: translateX(-50%);
      border: rgb(118, 184, 210) 2px solid;
      padding: 10px;
      border-radius: 35%;
      transition: 0.6s;
      img {
        width: 40px;
      }
    }
  }
  .input-box {
    /* 弹性布局 垂直排列 */
    display: flex;
    flex-direction: column;

    input {
      height: 40px;
      border-radius: 20px;
      /* 缩进15像素 */
      text-indent: 15px;
      outline: none;
      border: none;
      margin-bottom: 15px;
    }
    .register {
      margin-top: 15px;
      display: flex;
      justify-content: space-between;
    }
    .auth_code {
      display: flex;
      justify-content: space-between;
      input {
        width: 48%;
      }
      button {
        width: 48%;
      }
    }
  }

  .input-box input:focus {
    outline: 1px solid lightseagreen;
  }
  .input-box button {
    border: none;
    height: 45px;
    background-color: lightseagreen;
    color: #fff;
    border-radius: 20px;
  }

  .input-box .btn_box {
    display: flex;
    justify-content: space-between;

    button {
      width: 48%;
      border: none;
      border-radius: 20px;
      height: 45px;
      background-color: lightseagreen;
      color: #fff;
      cursor: pointer;
    }
  }

  /* 接下来是猫头鹰的样式 */
  .owl {
    width: 211px;
    height: 108px;
    /* 背景图片 */
    background: url("@/assets/img/owl-login.png") no-repeat;
    /* 绝对定位 */
    position: absolute;
    top: -100px;
    /* 水平居中 */
    left: 50%;
    transform: translateX(-50%);
  }
  .owl .hand {
    width: 34px;
    height: 34px;
    border-radius: 40px;
    background-color: #472d20;
    /* 绝对定位 */
    position: absolute;
    left: 12px;
    bottom: -8px;
    /* 沿Y轴缩放0.6倍（压扁） */
    transform: scaleY(0.6);
    /* 动画过渡 */
    transition: 0.3s ease-out;
  }
  .owl .hand.hand-r {
    left: 170px;
  }
  .owl.password .hand {
    transform: translateX(42px) translateY(-15px) scale(0.7);
  }
  .owl.password .hand.hand-r {
    transform: translateX(-42px) translateY(-15px) scale(0.7);
  }
  .owl .arms {
    position: absolute;
    top: 58px;
    width: 100%;
    height: 41px;
    overflow: hidden;
  }
  .owl .arms .arm {
    width: 40px;
    height: 65px;
    position: absolute;
    left: 20px;
    top: 40px;
    background: url("@/assets/img/owl-login-arm.png") no-repeat;
    transform: rotate(-20deg);
    transition: 0.3s ease-out;
  }
  .owl .arms .arm.arm-r {
    transform: rotate(20deg) scaleX(-1);
    left: 158px;
  }
  .owl.password .arms .arm {
    transform: translateY(-40px) translateX(40px);
  }
  .owl.password .arms .arm.arm-r {
    transform: translateY(-40px) translateX(-40px) scaleX(-1);
  }
}
</style>
